<template>
  <HeaderNav/>
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <section class="aside">
        <UserAside/>
        <Advice :data="advert"/>
      </section>

      <section style="min-height: 490px;">
        <h1 class="detail-col">我的收藏</h1>
        <div class="bg-hr"></div>
        <div id="sec-more-list" class="detail-col-list">
          <NoContent :show="collectList.length == 0"/>
          <!-- 定义一个条目-->
          <div class="pro" v-for="col in collectList">
            <div class="img">
              <img :src="extension(col.ext)"/>
            </div>
            <div class="cs">
              <div class="up">
                <a href="javascript:void(0)" @click="$router.push({name: 'resource-detail', params: {id: col.resId}})">{{
                    col.resourceName
                  }}</a>
              </div>
              <div class="down">
                <b class="uploader" title="作者">{{ col.nickName ?? col.tel }}</b>
                <b class="time" title="收藏时间">{{ col.createTime }}</b>
              </div>
            </div>
            <div class="arr">
              <span>积分:<b>{{ col.score }}</b></span>
              <button class="cancel" @click="cancelCollect(col.resId)">取消</button>
            </div>
          </div>

          <!-- 分页插件 -->
          <VanPagination v-model="page" :totalItems="total" :itemsPerPage="rows" :showPageSize="5"
                         :forceEllipses="true" @click-page="queryCollectList"/>
        </div>
      </section>
    </div>
  </article>
  <Footer/>
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import UserAside from "../components/UserAside.vue";
import VanPagination from '../components/VanPagination.vue' ;
import Advice from "../components/Advice.vue";
import NoContent from "../components/NoContent.vue";

export default {
  components: {
    NoContent,
    HeaderNav,
    Footer,
    UserAside,
    VanPagination,
    Advice,
  },
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      advert: {},
      collectList: [],
    }
  },
  created() {
    this.queryAdvert();
    this.queryCollectList();
  },
  methods: {
    queryAdvert() {
      this.$api.queryAdvertRank().then(ret => {
        if (ret.status) {
          this.advert = ret.data;
        }
      })
    },
    queryCollectList() {
      this.$api.queryCollectListPage(this.page, this.rows).then(ret => {
        if (ret.status) {
          this.collectList = ret.data.records;
          this.total = ret.data.total;
        }
      })
    },
    extension(ext) {
      let supportExts = ["doc", "docx", "exe", "gif", "gz", "html", "md", "mp4", "pdf", "png", "ppt", "pptx", "rar", "rmvb", "txt", "wps", "xls", "xlsx", "zip", "7z", "avi", "bmp"];
      if (!supportExts.includes(ext)) {
        ext = "unknow";
      }
      // 在 Vue3 中 动态加载图片地址的方式
      return new URL("../assets/images/" + ext + ".svg", import.meta.url).href;
    },
    cancelCollect(resId) {
       this.$api.collectResource(resId).then(ret=> {
          if (ret.status) {
            this.queryCollectList();
          }
       })
    }
  }
}
</script>

<style scoped>
.cancel {
  background: #eee;
  padding: 5px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}

.cancel:hover {
  background: #ccc;
}
</style>